<template>
	<view class="order-wrapper">
		<!-- 收货地址 -->
		<view class="address">
			<view v-if="address.detail">
				<view class="address-title">
					{{address.detail}}
				</view>
				<view class="address-info">
					<text>{{address.userName}}</text>
					<text>{{address.telNumber}}</text>
				</view>
			</view>
			
			<view v-else>
				<button class="choose-address" @click="handleAddress">选择地址</button>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="title">
			已选商品
		</view>
		
		<!-- 循环的购物车数据 -->
		<view class="goods-item" v-for="(item, key, index) in goods" :key="index">
			<!-- 图片 -->
			<navigator :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`">
				<image :src="item.goods_small_logo" mode="aspectFill"></image>
			</navigator>
			<!-- 右边的商品信息 -->
			<view class="goods-info">
				<!-- 标题 -->
				<navigator url="/pages/goods_detail/index?goods_id=xx" class="goods-title">
					{{item.goods_name}}
				</navigator>
				<!-- 价格和数量 -->
				<view class="goods-info-bottom">
					<view class="goods-price">
						￥{{item.goods_price}}
					</view>
					<view class="goods-number">
						x{{item.number}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部的总计 -->
		<view class="footer">
			<view class="all-price">
				合计：<text>￥{{allPrice}}</text>
			</view>
			<button type="warn" @click="navigatorPay">去支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品列表
				goods: {},
				//  收货地址的对象
				address: {}
			}
		},
		computed:{
			// 总价
			allPrice(){
				let price = 0;
				// 循环对象
				const keys = Object.keys(this.goods);
				// 循环goods列表
				keys.forEach(id => {
					// item是当前的元素
					const item = this.goods[id];
					price += item.goods_price * item.number;
				})
				
				return price;
			},
		},
		onShow(){
			// 获取本地数据
			const goods = uni.getStorageSync("goods");
			// 缓存的商品列表
			const cacheGoods = {};
			
			Object.keys(goods).forEach(id => {
				// 如果当前商品是选中状态，那么就是需要去结算的
				if(goods[id].selected){
					// 添加到data的goods
					cacheGoods[id] = goods[id];
				}
			})
			
			this.goods = cacheGoods;
		},
		methods: {
			// 选择收货地址
			handleAddress(){
				uni.chooseAddress({
				  success: (res) => {
					  this.address = {
						  detail: `${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`,
						  userName: res.userName,
						  telNumber: res.telNumber
					  }
				  }
				})
			},
			// 去支付
			navigatorPay(){
				// 获取本地的token
				const token = uni.getStorageSync("token");
				
				if(token){
					// goods是一个数组
					const goods = Object.keys(this.goods).map(id => {
						return this.goods[id];
					})
					
					// 创建订单，获取到订单号码
					uni.request({
						url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create",
						method: "POST",
						header: {
							Authorization: token
						},
						data: {
							order_price: this.allPrice,
							consignee_addr: this.address.detail,
							goods: goods
						},
						success: res => {
							// 创建订单成功之后获取订单编号
							const {order_number} = res.data.message;
							
							// 根据订单编号获取支付的参数,给到requestPayment使用的
							uni.request({
								url: "https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder",
								method: "POST",
								header: {
									Authorization: token
								},
								data: {
									order_number
								},
								success: res => {
									// pay就是后台返回的支付参数
									const {pay} = res.data.message;
									wx.requestPayment({
										...pay,
										success: res => { 
											console.log("支付成功,跳转到订单列表页")
										},
									});
								}
							})
						}
					})
					
					// 直接去支付，直接发起付款
				}else{
					// 没有token。去搜权
					console.log("跳转到搜权页");
					uni.navigateTo({
						url: "/pages/auth/index"
					})
				}
			}
		}
	}
</script>

<style lang="less">

.address{
	border-bottom: 20rpx #eee solid;;
	padding: 20rpx 20rpx 40rpx;
	
	.address-title{
		font-size: 14px;
		margin-bottom: 5px;
	}
	
	.address-info{
		font-size: 13px;
		color: #999;
		
		text{
			margin-right: 30rpx;
		}
	}
	
	.choose-address{
		width: 303rpx;
		height: 89rpx;
		border-radius: 50px;
		border: 1px #EA4350 solid;
		line-height: 89rpx;
		background: #fff;
		margin: 0 auto;
		color: #EA4350;
		font-size: 14px;
	}
}

	
.title{
	padding: 20rpx;
}
	
.goods-item{
	padding: 20rpx 30rpx;
	display: flex;
	height: 191rpx;
	align-items: center;
	border-bottom: 1px #eee solid;
	
	image {
		width: 191rpx;
		height: 191rpx;
		display: block;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	
	.goods-info{
		display: flex;
		flex: 1;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
		
		
		.goods-title{
			font-size: 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.goods-info-bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.goods-price{
				color: red;
			}
		}
	}
}

.order-wrapper{
	padding-bottom: 83rpx;
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 82rpx;
		border-top: 1px #eee solid;
		background: #fff;
		display: flex;
		align-items: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 0 30rpx;
		
		.all-price{
			flex: 1;
			text{
				color: red
			}
		}
		
		button{
			width: 150rpx;
			height: 52rpx;
			line-height: 53rpx;
			font-size: 12px;
			border-radius: 50px;
			box-sizing: border-box;
		}
	}
}
</style>
